<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-back-button text=""></ion-back-button>
    </ion-buttons>
    <ion-title style="text-align: center">投诉及建议</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content scrollY="false">
  <Tabs
          [page]="2"
          [useOnPan]="true"
          [swipeable]="true"
          [activeTab]="index"
          [tabBarActiveTextColor]="'#1890ff'"
          (onChange)="onChange($event)"
          (onTabClick)="onTabClick($event)">
    <TabPane [title]="titleTemplate">
      <ng-template #titleTemplate>
        <div>投诉及建议</div>
      </ng-template>
      <div style="align-items: center;justify-content: center;background-color: #fff">
        <ng-form [formGroup]="registerForm">
          <List>
            <ListItem>
              <ion-radio-group name="type" [value]="formData.type">
                <ion-label style="font-size: 14px;vertical-align: top">选择反馈类型</ion-label>
                <ion-radio style="margin-left: 32px" slot="start" value="complain"></ion-radio>
                <ion-label style="margin-left: 8px;font-size: 14px;vertical-align: top">投诉</ion-label>
                <ion-radio style="margin-left: 16px" slot="end" value="suggestion"></ion-radio>
                <ion-label style="margin-left: 8px;font-size: 14px;vertical-align: top">建议</ion-label>
              </ion-radio-group>
            </ListItem>
            <TextareaItem [placeholder]="'请输入信息'"
                          [value]="formData.description"
                          formControlName="description"
                          rows="6"
                          style="font-size: 14px"
                          maxlength="300"
                          id="description"></TextareaItem>
            <TextareaItem [placeholder]="'手机/邮箱/QQ'"
                          [value]="formData.contact"
                          formControlName="contact"
                          style="font-size: 14px"
                          rows="1"
                          id="contact"></TextareaItem>
          </List>
          <div style="margin-top: 8px">
            <label style="margin-left: 8px;font-size: 14px">上传图片 (2/6)</label>
            <ImagePicker
                    [files]="files"
                    [length]="6"
                    [selectable]="files.length < 7"
                    (onImageClick)="imageClick($event)"
                    (onChange)="imageChange($event)"
                    (onAddImageClick)="addImageClick($event)"
            ></ImagePicker>
          </div>
          <div style="margin-top: 8px">
            <nzm-button style="margin-left: auto;margin-right: auto;width: 300px" type="primary" [size]="'small'">提交</nzm-button>
          </div>
        </ng-form>
      </div>
    </TabPane>
    <TabPane [title]="titleTemplate1">
      <ng-template #titleTemplate1>
        <div>历史记录</div>
      </ng-template>
      <div style="align-items: center;justify-content: center;background-color: #fff">
        <ion-list lines="none" *ngFor="let i of myList">
          <Card [full]="true" style="background-color: #ffffff">
            <div style="background-color: #ffffff;margin-left: 8px;margin-right: 8px;margin-top: 8px;">
              <div>
                <Icon style="width: 20px;height: 20px" *ngIf="i.type === 'complain'" src="assets/icon/complain.svg"></Icon>
                <Icon style="width: 20px;height: 20px" *ngIf="i.type === 'suggestion'" src="assets/icon/suggestion.svg"></Icon>
                <span style="margin-left: 16px;font-size: 14px;">LAM系列（6级）三相异步电机出现故障</span>
                <Icon style="float: right;margin-top: -8px;" *ngIf="i.solve" size="lg" src="assets/icon/solved.svg"></Icon>
                <Icon style="float: right;margin-top: -8px;" *ngIf="!i.solve" size="lg" src="assets/icon/unsolved.svg" slot="end"></Icon>
              </div>
              <div style="margin-top: 8px">
                <span style="font-size: 12px;color: grey">2020-03-11 09:15:37</span>
                <span style="float: right;font-size: 12px;color: grey">供应商已解决</span>
              </div>
              <div style="margin-top: 8px;font-size: 14px">{{i.description}}</div>
              <ImagePicker
                      [files]="i.images"
                      [length]="3"
                      [selectable]="false"
                      [disableDelete]="true"
                      (onImageClick)="imageClick($event)"
                      (onChange)="imageChange($event)"
                      (onAddImageClick)="addImageClick($event)"
              ></ImagePicker>
            </div>
          </Card>
          <ion-card *ngIf="i.solve">
            <ion-card-content style="background-color: #ffffff">
              <div>
                <Icon style="width: 20px;height: 20px" size="lg" src="assets/icon/supply.svg"></Icon>
                <span style="margin-left: 16px;font-size: 14px;">xxx供应商回复</span>
              </div>
              <div style="margin-top: 8px">
                <span style="font-size: 12px;color: grey">2020-03-12 12:45:08</span>
              </div>
              <span disabled style="margin-top: 8px;font-size: 14px">{{des}}</span>
            </ion-card-content>
          </ion-card>
        </ion-list>
      </div>
    </TabPane>
  </Tabs>
</ion-content>
